<template>
    <div class="home">
        <LogReg v-if="$store.state.loginView"></LogReg>
            <!-- 轮播图 -->
        <Carousel v-model="value" autoplay loop class="carousel">
            <CarouselItem v-for="item in carouselList" :key="item.id">
                <div class="crousel-mask"></div>
                <div class="crousel-mask" :style="{'background': 'linear-gradient( rgba(26,53,77,0.6) ,'+item.backgroundColor+')'}"></div>
                <div class="demo-carousel"><img :src=$store.state.constant.base_url+item.img  style="width: 550px;height:300px" > </div>
                <span class="span-carousel">{{ item.title }}</span>
            </CarouselItem>            
        </Carousel>
        <!-- 推荐 -->
        <button class="change-btn" v-on:click="changeVideo">换一换</button>
        <!-- <button class="change-btn" v-on:click="test">换一换</button> -->

        <div class="feed-card" v-for="(item,index) in tempList" :key="item.id" ref="video">
            <!-- 实际的图 -->
            <div v-if="index<this.recommendList.length">
                <div class="view">
                    <img :src=$store.state.constant.base_url+recommendList[index].img alt="" style="width: 270px; height: 152px;" @click="$store.commit('goDetail',recommendList[index].id)">
                    <div class="view-detail">
                        <Icon type="ios-arrow-dropright" size="16"/> {{ recommendList[index].viewsChange }}   
                        <Icon type="ios-barcode-outline" size="16"/> {{ recommendList[index].commentCount }}
                    </div>
                </div>
                <div class="title-up-container">
                    <div class="title"><a href="javascript:void(0);" @click="$store.commit('goDetail',recommendList[index].id)">{{ recommendList[index].title }}</a></div>
                    <div class="up"><a href="javascript:void(0);" @click="$store.commit('goUser',recommendList[index].up)"><Icon type="ios-contact" size="16"/>{{ recommendList[index].nickname }}</a></div>
                </div>
            </div>
            <!-- 占位图 -->
            <div v-else class="floor-feed-card">
                <div>
                    <div class="floor-view view"></div>
                    <div class="floor-bottom"></div>
                    <div class="floor-bottom"></div>
                </div>
            </div>            
        </div>     
    </div>

</template>
<script>
    import LogReg from './LogReg.vue'
    import lodash from 'lodash'

    export default {
        name:'Home',
        components:{
            LogReg
        },
        data () {
            return {
                value: 0,
                offset:7,
                carouselList:[],
                recommendList:[],   
                tempList:[1,1,1,1,1,1,1,1]                                                 
            }
        },
        methods:{
            async getData(){
                try{
                    let res
                    res=await this.$api.get('getCarousel')
                    this.carouselList=res.data.list

                    res=await this.$api.get('getVideo',{limit:8})
                    this.recommendList=res.data     
                }catch(err){
                    console.log(err);
                }
            },
            changeVideo(){
                this.recommendList = Array.from(this.recommendList)      
                this.recommendList.sort(function(){
                    return Math.random()-0.5
                })
            },
            async lazyLoading () { // 滚动到底部，再加载的处理事件
                const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
                const clientHeight = document.documentElement.clientHeight
                const scrollHeight = document.documentElement.scrollHeight
                let height=0
                let cols=0
                let numAdd
                let res
                let last_length
                if (scrollTop + clientHeight >= scrollHeight) {
                    // 滚动到底部，逻辑代码
                    if(this.$refs.video.length>1){
                        height=this.$refs.video.at(-1).offsetTop
                        cols=height/236
                    }     
                    while(cols*4+4>this.tempList.length){
                        this.tempList.push(1)
                    }
                    numAdd=cols*4+4-this.recommendList.length
                    if(numAdd>0&&this.recommendList.length!=last_length){
                        last_length=this.recommendList.length
                        res=await this.$api.get('getVideo',{limit:numAdd,offset:this.recommendList.length})
                        this.recommendList.push(...res.data)
                    }
                }
            },
        },
        created(){
            this.$store.commit('changeLogin')
            this.getData()
        },
        mounted() {
            // 使用节流
            let lazyLaodWhtiThrottle =  lodash.throttle(this.lazyLoading, 200)
            window.addEventListener('scroll', lazyLaodWhtiThrottle); // 滚动到底部，再加载的处理事件
        },
    }
        
</script>

<style>
    .home{
        position: absolute;
        width: 1192px;
        top:70px;
        left:70px;
    }

    /* 轮播图 */
    .carousel{
        float: left;
        width: 550px;
        height: 400px;
        border-radius: 5px;
        overflow: hidden;
    }

    .crousel-mask{
        position: absolute;
        z-index: 1;
        bottom: 0;
        width: 550px;
        height: 100px;
    }

    .ivu-carousel-track{
        height: 400px;
    }

    .demo-carousel{
        width: 550px;
        height:300px;
    }

    .span-carousel{
        position: relative;
        z-index: 2;
        left: 20px;
        top: 20px;
        font-weight: 400;
        font-size: 18px;
        color: #fff;
    }

    /* 视频详情页 */
    .feed-card-top{
        float: left;
        width: 562px;
    }

    .change-btn{
        flex-direction: column;
        position: fixed;
        left: 1200px;
        top: 88px;
        height: auto;
        width: 40px;
        padding: 9px;
        font-size: 12px;
        border-radius: 8px;
        border: 1px solid rgb(227,229,231);
        background-color: #fff;
        cursor: pointer;
    }

    .change-btn:hover{
        background-color: rgb(227,229,231);
    }

    .feed-card{
        float: left;
        width: 270px;
        height: 225px;
        margin-left: 11px;
        margin-bottom: 11px;   
    }

    .floor-feed-card{
        border: 1px solid rgb(227,229,231);
        height: 225px;
    }

    .feed-card:nth-of-type(4n+6){
        margin-left: 0;
    }

    .feed-card .view{
        position: relative;
        width: 270px;
        height:152px;
        bottom: 0;
        left: 0;
        border-radius: 5px;
        overflow: hidden;
        cursor: pointer;
    }

    .floor-view{
        background-color: rgb(241,242,243);
    }

    .floor-bottom{
        margin: 5px;
        margin-bottom: 0;
        height: 17px;
        width: 260px;
        background-color: rgb(241,242,243);
    }

    .feed-card .view .view-detail{
        position: absolute;
        height: 14px;
        line-height: 14px;
        color: #fff;
        font-size: 14px ;
        bottom: 10px;
        left: 5px;
    }

    .feed-card .title{
        width: 270px;
        height: 44px;
        padding: 5px;
        text-overflow: ellipsis;
        display:-webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient:vertical;
        overflow: hidden;           
    }

    .feed-card .up{
        margin-top: 5px;
        cursor: default;
    }

    .feed-card .up a{
        font-weight: normal !important;
        color: rgb(148,153,160) !important;
    }

    .feed-card .up a:hover{
        color:rgb(0,175,239) !important;
    }


</style>